<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/shopping-mall.css">
    <script src="../client-lib/jquery-3.7.1.js"></script>
    <script>
        function showAllCommodities() 
        {
            fetch('./commodity/list')
                .then(response => response.json())
                .then(data => createCommodityTable(data))
                .catch(error => console.log(error));
            console.log("页面加载一次")
        }

        function createCommodityTable(json) 
        {
            var commodities = json["data"];
            var tbody = $("#commodities");

            tbody.empty();

            for(var i=0;i<commodities.length;i++)
            {
                var commodity = commodities[i];
                addCommodityToTable(commodity);
            }
        }

        function addCommodityToTable(b) 
        {
            var tbody = $("#commodities");

            var tr = $("<tr></>tr>");
            tr.append("<td>" + b.id + "</td>");
            tr.append("<td>" + b.name + "</td>");
            tr.append("<td>" + b.origin + "</td>");
            tr.append("<td>" + b.price + "</td>");
            tr.append("<td>" + b.category + "</td>");
            tr.append("<td>" + b.productionDate + "</td>");
            tr.append("<td><img class='commodity-img-thumbnail' src='../upload/" + b.image + "'/></td>");
            tr.append("<td><a href='./commodity/delete?id=" + b.id + "'>删除</a></td>");
            tr.append("<td><a href='./update_commodity.html?id=" + b.id + "'>修改</a></td>");
            tbody.append(tr);
        }

        function searchCommodity()
        {   
            var keyVal = $("input[name='key']").val();
            if(keyVal == null)
            {
                alert("搜索内容不能为空");
                return;    
            }
            var tbody = $("#search_commodities");
            tbody.empty();
            console.log("清空");

            $.post
            ({
                url:"./commodity/search",
                data:{key:keyVal},
                success:function(response)
                {            
                    $.each(response,function(index,commodity)
                    {
                        var tr = $("<tr></tr>");
                        tr.append("<td>" + commodity.id + "</td>");
                        tr.append("<td>" + commodity.name + "</td>");
                        tr.append("<td>" + commodity.origin + "</td>");
                        tr.append("<td>" + commodity.price + "</td>");
                        tr.append("<td>" + commodity.category + "</td>");
                        tr.append("<td>" + commodity.productionDate + "</td>");
                        tr.append("<td><img class='commodity-img-thumbnail' src='../upload/" + commodity.image + "'/></td>");
                        tbody.append(tr);
                    });
        
                },
                error: function(jqXHR, textStatus, errorThrown) 
                {
                    console.log('Error: ' + textStatus + ' - ' + errorThrown);
                }
            });
            
        }


    </script>
</head>
<body>
    <div id="logout" style="float: right;"><a href="../logout">退出登录</a></div>
    <div class="box">
        <div class="table-box">
            <table class="list-bs">
                <thead>
                <tr>
                    <th>编号</th><th>商品名</th><th>产地</th><th>价格</th><th>分类</th><th>生产日期</th><th>图片</th><th></th><th></th>
                </tr>
                </thead>
                <tbody id="commodities">

                </tbody>
            </table>

            <br><br>
            <div id="add_button"><a href="add_commodity.html">添加商品</a></div>
            
            <br>
            <div style="text-align:center;">
                <form class='search-form' onsubmit="return false" id="search_form"><br>
                    <input type='text' name='key' id="key">&nbsp;&nbsp;&nbsp;
                    <button type='button' id="search_button" onclick="searchCommodity()" style="color:white;">查询</button>
                </form>
            </div>
            <table class="list-bs" style="padding-top: 40px;">
                <thead style="margin-top: 25px;">
                    
                </thead>
                <tbody id="search_commodities">
                    
                </tbody>
            </table>
        </div>
    </div>

<script>
    $(document).ready(function(){
        showAllCommodities();
    });
</script>

</body>

<style>
    #logout
    {
        position: absolute;
        right: 100px;
        top: 50px;
    }

    .list-bs 
    {
        margin-top: 25px;
        background-color: transparent;
        margin: auto auto;
        color: white;
        border-spacing: 0;
    }

    #key
    {
        border-radius: 25px; 
        height: 40px;
        background-color: transparent; 
        border: white 3px solid;
        color:white;
    }

    #key:hover
    {
        box-shadow:white 0px 0px 10px
    }

    .search-form
    {
        margin: auto auto;
    }

    #search_button
    {
        padding:10px;
        font-size: 14px;
        background-color: transparent;
        color:white;
        text-align: center;
        border-radius: 25px;
        margin-top:20px;
        cursor: pointer;
        border: 3px solid;
    }

    #add_button
    {
        margin: auto auto;
        text-align: center;
    }

    .list-bs th {background-color: transparent; color: white; padding: 0.8em; text-align: center;}
    .list-bs tr {height: 35px;}
    .list-bs td {border: 1px solid white; padding: 0.5em; border-left: none; border-right: none; text-align: center;}

    img
    {
        width:100%;
    }

    a
    {
        text-decoration: none;
        color: white;
        margin: auto auto;
    }

    a:hover
    {
        text-decoration: underline;1
    }

    .table-box 
    {
        /* background-color: rgba(255, 255, 255, 0.6); */
        background-color: transparent;
        padding: 25px 15px;
        position: absolute;
        /* right: 100px; */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .box
    {
      width:100%;
      height:100vh;
      background-image: url('../img/list_bg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

</style>

</html>